<template>
  <div
    v-if="loaded"
    class="mt-10"
  >
    <page-header
      title="商品"
      desc="已设置的频道关联商品的数据源"
    >
      <div class="d-flex justify-content-between">
        <el-button
          type="primary"
          size="small"
          @click="onRelation"
        >设置频道商品</el-button>
      </div>
    </page-header>
    <gridview
      ref="gridView"
      :api-service="apiService"
      :grid-config="configData.gridConfig"
      :grid-handles="configData.gridHandles"
      :bind-params="params"
      :grid-edit-width="100"
      :is-async="true"
      @action="onAction"
    />
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import Gridview from '@/components/Gridview'
import GridApiService from '@/api/grid'

export default {
  name: 'Brand',
  components: {
    PageHeader,
    Gridview
  },
  props: {
    primaryKey: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      loaded: false,
      configData: {},
      listQuery: {},
      currentRow: null,
      data: null,
      apiService: new GridApiService('/channel/source-goods'),
      dialogFormVisible: false,
      dialogTitle: '编辑用户授权策略'
    }
  },
  computed: {
    params() {
      return Object.assign({ channel_id: this.primaryKey }, this.listQuery)
    }
  },
  watch: {
    data() {
      this.configData = this.data
      this.loaded = true
    }
  },
  created() {},
  mounted() {
    this.loadGridModel()
  },
  methods: {
    onRelation() {
      this.$router.push({
        name: 'shop/channel/goods/:id',
        params: {
          id: this.primaryKey
        }
      })
    },
    loadGridModel() {
      this.apiService.config().then(response => {
        const { data } = response
        this.data = data.config
      })
    },
    onRemove(id) {
      this.$http.channel.deleteSource(id).then(res => {
        this.onRefresh()
      })
    },
    onAction(name, row) {
      if (name === 'delete') {
        this.onRemove(row['channelSource.id'])
      }
    },
    onRefresh() {
      console.log('onRefresh')
      this.dialogFormVisible = false
      this.listQuery = {}
    },
    onDialogSubmit() {
      var $el = this.$refs
      if ($el.dialogForm) {
        $el.dialogForm.onSubmit()
      } else {
        console.log('refs:', $el)
      }
    }
  }
}
</script>
